<template>
  <div class="container">
    <div class="u-title f-mtp10">
      <h2>权限管理</h2>
      <el-button
        size="mini"
        @click="addBtnClickEvent">添 加</el-button>
    </div>
    <div>
      <el-table
        :data="permissionList"
        border
        style="width: 100%">
        <el-table-column prop="name" label="部门名称" width="180"></el-table-column>
        <el-table-column prop="description" label="职能描述" width="180"></el-table-column>
        <el-table-column prop="employeeCount" label="部门管理员数量" width="180"></el-table-column>
        <el-table-column prop="createTime" label="添加时间" width="180"></el-table-column>
        <el-table-column prop="state" label="是否启用" width="180">
          <template slot-scope="scope">
            <el-switch
              @change="enableDepartment(scope.row)"
              style="display: block"
              v-model="scope.row.state"
              active-value='normal'
              inactive-value='expired'
              active-color="#1ABC9C"
              inactive-color="#e4e4e4">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="enable" label="操作">
          <template slot-scope="scope">
            <router-link class='f-mrt10 s-c-green' :to="'/home/permissionSettings/' + scope.row.id">权限设置</router-link>
            <span class='f-mrt10 f-csp s-c-green' @click="editBtnClickEvent(scope.row)">编 辑</span>
            <el-button class='s-c-red' type="text" @click="handleDelete(scope.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="totalCount > 0" class='f-ptp20 f-pbt20 f-oh'>
        <el-pagination
          class='f-fr'
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="560px">
      <div>
        <div class='dialog-item flex'>
          <label for="">部门名称：</label>
          <div class='dialog-item-right'>
            <el-input v-model="departmentName" placeholder="输入部门名称"></el-input>
          </div>
        </div>
        <div class='dialog-item flex'>
          <label for="">职能描述：</label>
          <div class='dialog-item-right'>
            <el-input type="textarea" :rows=4 v-model="departmentDesc" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogHandleBtnClickEvent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PermissionManage',
  data() {
    return {
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      dialogTitle: '添加部门',
      selectDepartment: null,   // 选择编辑的部门
      isEdit: false,  // 是否修改状态
      value4: true,
      departmentName: '',
      departmentDesc: '',
      permissionList: []
    }
  },
  created: function() {
    this.getList();
  },
  methods: {
    // 是否启用
    enableDepartment(item) {

      console.log('item:::', item);
      this.handleDepartment('update',{
        id: item.id,
        state: item.state
      });
    },
    // 分页回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    // 添加按钮点击事件
    addBtnClickEvent() {
      this.dialogTitle = '添加部门';
      this.dialogVisible = true;
      this.isEdit = false;
      this.departmentName = '';
      this.departmentDesc = '';
    },

    // 删除按钮点击事件
    handleDelete(item) {
      this.$confirm('确定要删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除部门信息
          this.handleDepartment('deleted', {
            id: item.id,
            state: 'deleted'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    // 编辑按钮点击事件
    editBtnClickEvent(item) {
      console.log('item:::', item);
      this.dialogTitle = '修改部门信息';
      this.isEdit = true;
      this.dialogVisible = true;
      this.departmentName = item.name;
      this.departmentDesc = item.description;
      this.selectDepartment = item;
    },

    // 获取部门列表
    getList() {
      console.log('this.$store:::', this.$store);
      this.$store.dispatch('GET_PERMISSION_LIST', {

      }).then(res => {
        if(res.data.retCode == 0) {
          this.permissionList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 添加/修改部门弹窗--确定按钮点击事件
    dialogHandleBtnClickEvent() {
      if(!this.isEdit) {
        // 新增部门
        this.handleDepartment('add', {
          name: this.departmentName,
          description: this.departmentDesc
        });
      } else {
        // 修改部门信息
        this.handleDepartment('update', {
          id: this.selectDepartment.id,
          name: this.departmentName,
          description: this.departmentDesc
        });
      }
    },

    // 添加/修改/删除部门
    handleDepartment(type, params) {
      this.$store.dispatch('UPDATE_DEPARTMENT', params).then(res => {
        console.log('res:::', res);
        if(res.data.retCode == 0) {
          if(type == 'add') {
            this.$message.success('添加成功！');
            this.dialogVisible = false;
            this.getList();
          } else if(type == 'update') {
            this.$message.success('修改成功！');
            this.dialogVisible = false;
            this.getList();
          } else {
            this.$message.success('删除成功！');
            this.getList();
          }
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog-item{
  margin-bottom: 10px;
}
.dialog-item>label{
  width: 100px;
  line-height: 40px;
  text-align: right;
  margin-right: 10px;
}
.dialog-item>label::before{
  content: '*';
  line-height: 40px;
  color: red;
  margin-right: 5px;
}
.dialog-item-right{
  flex: 1;
}
</style>
